<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<div id="app">
    <h1 id="hh"> {{msg}} </h1>
    <child @created="handleCreated"></child>
</div>
</body>

</html>
<script src='https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js'></script>
<script>

    //父子组件嵌套,钩子函数的执行顺序:

    //父组件的beforeCreate=>父组件的created=>父组件的beforeMount=>子组件的beforeCreate=>子组件的created=>子组件的beforeMount=>子组件的Mounted=>父组件的Mounted

    //父组件能不能监听到子组件的钩子函数执行? 可以的

    //实现流程:直接使用$emit 子传父就行了

    let app = document.querySelector('#app')

    let vm = new Vue({
        components: {
            child: {
                beforeCreate() {
                    console.log('子组件的beforeCreate')
                },
                created() {
                    console.log('子组件的created')
                    this.$emit('created')
                },
                beforeMount() {
                    console.log('子组件的beofreMoutn')
                },
                mounted() {
                    console.log('子组件的Mounted')
                },
                template: "<h1>子组件</h1>"
            }
        },
        methods: {
            handleCreated() {
                console.log('子组件的created执行了')
            }
        },
        data: {
            msg: '生命周期'
        },
        // 创建之前
        beforeCreate() {
            //这里是vue初始化的一个钩子,数据和dom(虚拟Dom)都获取不到,意味着这里不能操作data数据
            console.group('beforeCreate')
            //创建的虚拟dom
            console.log('$el---', this.$el)
            //实例的daata数据
            console.log('$data---', this.$data)
            //操作原生dom
            console.log(document.querySelector('#hh').innerText)
            console.groupEnd()
        },
        //创建之后
        created() {
            //虚拟dom和真是dom都没有被创建,但是data数据已经完成了数据劫持,能够正常的进行相应
            //可以发送异步请求 可以操作data数据 不能操作dom
            console.group('created')
            //创建的虚拟dom
            console.log('$el---', this.$el)
            //实例的daata数据
            console.log('$data---', this.$data)
            //操作原生dom
            console.log(document.querySelector('#hh').innerText)
            console.groupEnd()

        },
        //挂载之前
        beforeMount() {
            //虚拟dom已经创建,但是尚未解析插值表达式 指令等内容
            //可以发送异步请求 可以操作data数据 不能操作dom
            console.group('beforeMount')
            //创建的虚拟dom
            console.log('$el---', this.$el)
            //实例的daata数据
            console.log('$data---', this.$data)
            //操作原生dom
            console.log(document.querySelector('#hh').innerText)
            console.groupEnd()
        },
        //挂载后
        mounted() {
            //mounted是编写业务中最合适的一个钩子
            //这里面组件结构已经挂载完成
            //操作dom 发送异步请求 更新dom等等....
            //可以发送异步请求 可以操作数据  可以操作dom
            console.group('mounted')
            //创建的虚拟dom
            console.log('$el---', this.$el)
            //实例的daata数据
            console.log('$data---', this.$data)
            //操作原生dom
            console.log(document.querySelector('#hh').innerText)
            console.groupEnd()
            console.log(app === this.$el)

        },
        // 更新前
        beforeUpdate() {
            console.group('beforeUpdate')
            //创建的虚拟dom
            console.log('$el---', this.$el)
            //实例的daata数据
            console.log('$data---', this.$data)
            //操作原生dom
            console.log(document.querySelector('#hh').innerText)
            console.groupEnd()

        },
        //更新后
        updated() {
            console.group('upadted')
            //创建的虚拟dom
            console.log('$el---', this.$el)
            //实例的daata数据
            console.log('$data---', this.$data)
            //操作原生dom
            console.log(document.querySelector('#hh').innerText)
            console.groupEnd()

        },
        //销毁前
        beforeDestroy() {
            // 卸载定时器 卸载持续的事件侦听(比如:侦听video audio的播放进度 websocket等等)
        },
        // 销毁后
        destoryed() {

        }
    }).$mount('#app')
</script>